// 获取元素
let goodsJustifyEl = document.querySelector('.goodsJustify');
let commonUl = document.createElement('ul');
let headerEl = document.querySelector('header')
commonUl.className = 'mainContent';
let moreEl = document.createElement('div');
moreEl.className = 'nomore';
let clothesArr = [];
    bagArr = [];
    digitalArr = [];
    lipstickArr = [];
    shoesArr = [];
    trousersArr = [];
    watchesArr = [];


void(async function getGoods() {
    let allGoods = await axios({
        method: 'get',
        url: 'http://localhost:9527/api/data/getAllGoods',
    })
    let goodsData = allGoods.data.data;
    Object.keys(goodsData).forEach((key) => {
        if (goodsData[key].cartType == 'clothes') {
            clothesArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'bag') {
            bagArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'Digital') {
            digitalArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'Lipstick') {
            lipstickArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'trousers') {
            trousersArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'shoes') {
            shoesArr.push(goodsData[key]);
        }
        if (goodsData[key].cartType == 'watches') {
            watchesArr.push(goodsData[key]);
        }
    })
})()


// 默认渲染第一个
window.onload = function() {
    commonUl.innerHTML = '';
    commonUl.remove();
    moreEl.innerHTML = '';
    moreEl.remove();
    for (i = 0; i < bagArr.length; i++) {
        commonUl.innerHTML += `
        <li class="goods" data-name="${bagArr[i].cartName}">
            <img src="${bagArr[i].cartImg}" alt="">
            <span>${bagArr[i].cartDes}</span>
            <span>￥${bagArr[i].cartPrice}.00</span>
        </li>
    `
    }
    goodsJustifyEl.after(commonUl);
}









// 设置事件监听，分别渲染数据
goodsJustifyEl.addEventListener('click', function (e) {
    commonUl.innerHTML = '';
    commonUl.remove();
    moreEl.innerHTML = '';
    moreEl.remove();
    let targetEl = e.target;
    if (targetEl.closest('.bag')) {
        for (i = 0; i < bagArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${bagArr[i].cartName}">
                <img src="${bagArr[i].cartImg}" alt="">
                <span>${bagArr[i].cartDes}</span>
                <span>￥${bagArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }
    if (targetEl.closest('.clothes')) {
        for (i = 0; i < clothesArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${clothesArr[i].cartName}">
                <img src="${clothesArr[i].cartImg}" alt="">
                <span>${clothesArr[i].cartDes}</span>
                <span>￥${clothesArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }
    if (targetEl.closest('.digital')) {
        for (i = 0; i < digitalArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${bagArr[i].cartName}">
                <img src="${digitalArr[i].cartImg}" alt="">
                <span>${digitalArr[i].cartDes}</span>
                <span>￥${digitalArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }
    if (targetEl.closest('.lipstick')) {
        for (i = 0; i < lipstickArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${lipstickArr[i].cartName}">
                <img src="${lipstickArr[i].cartImg}" alt="">
                <span>${lipstickArr[i].cartDes}</span>
                <span>￥${lipstickArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }
    if (targetEl.closest('.shoes')) {
        for (i = 0; i < shoesArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${shoesArr[i].cartName}">
                <img src="${shoesArr[i].cartImg}" alt="">
                <span>${shoesArr[i].cartDes}</span>
                <span>￥${shoesArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }



    if (targetEl.closest('.trousers')) {
        for (i = 0; i < trousersArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${trousersArr[i].cartName}">
                <img src="${trousersArr[i].cartImg}" alt="">
                <span>${trousersArr[i].cartDes}</span>
                <span>￥${trousersArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);

    }
    if (targetEl.closest('.watches')) {
        for (i = 0; i < watchesArr.length; i++) {
            commonUl.innerHTML += `
            <li class="goods" data-name="${watchesArr[i].cartName}">
                <img src="${watchesArr[i].cartImg}" alt="">
                <span>${watchesArr[i].cartDes}</span>
                <span>￥${watchesArr[i].cartPrice}.00</span>
            </li>
        `
        }
        goodsJustifyEl.after(commonUl);
    }
    if (targetEl.closest('.more')) {
        moreEl.innerHTML = `
        <img src="../../img/icon/nomore.png" alt="">
        <p>没有更多啦~</p>
        `
        goodsJustifyEl.after(moreEl);
    }
})


// 返回上一级
headerEl.addEventListener('click', function (e) {
    if (e.target.tagName == 'IMG' || e.target.tagName == 'SPAN') {
        window.history.back();
    }
})

commonUl.addEventListener('click', function (e) {
    if (e.target.closest('.goods')) {
        let cartName = e.target.closest('.goods').dataset.name
        localStorage.setItem("cartName", cartName)
        let timer = setTimeout(() => {
            location.href = "../WXL/shop.html"
        })
    }
})